<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"/>

    <Editor style="height: 150px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" @onChange="updateHtml"/>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {onBeforeUnmount, ref, shallowRef, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import attachmentService from "@/components/MFileUpload/attachmentService";
import {VXETable} from "vxe-table";
export default {
  components: {Editor, Toolbar},
  props: ['html'],
  setup(props, {emit}) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref(props.html)
    watch(props, (newValue) => {
      valueHtml.value = newValue.html
    })

    // 模拟 ajax 异步获取内容
    // onMounted(() => {
    //   setTimeout(() => {
    //     valueHtml.value = '<p></p>'
    //   }, 1500)
    // })

    const updateHtml = () => {
      emit('change', valueHtml.value)
    }
    const toolbarConfig = {
      toolbarKeys: [
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'uploadImage', // 上传图片
        'delIndent', // 缩进
        'indent', // 增进
        'deleteImage',//删除图片
        'divider', // 分割线
        'insertImage', // 网络图片
        'insertTable', // 插入表格
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        'fullScreen' // 全屏

      ],
      excludeKeys: [
        'bgColor', // 背景色
        'blockquote', // 引用
        'codeBlock', // 代码段
        'emotion', // 表情
        'fontFamily', // 字体
        'headerSelect' // 标题
      ]
    }
    const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: {},
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    editorConfig.MENU_CONF['uploadImage'] = {
      // 其他配置...

      // 小于该值就插入 base64 格式（而不上传），默认为 0
      base64LimitSize: 5 * 1024, // 5kb


      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 1,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒

      // 上传之前触发
      onBeforeUpload(file) {    // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file

        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },

      // 上传进度的回调函数
      onProgress(progress) {       // JS 语法
                                   // progress 是 0-100 的数字
        console.log('progress', progress)
      },

      // 单个文件上传成功之后
      onSuccess(file, res) {          // JS 语法
        console.log(`${file.name} 上传成功`, res)
      },

      // 单个文件上传失败
      onFailed(file, res) {           // JS 语法
        console.log(`${file.name} 上传失败`, res)
      },

      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res)
      },

      // 自定义上传
      async customUpload(file, insertFn) {                   // JS 语法
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        let formData = new FormData();
        //表单名--对应实体表名
        let formDto = {associateFormId: 1, associateFormName: "editPic"};
        let fileUploadDto = JSON.stringify(formDto)
        formData.append("fileUploadDto", new Blob([fileUploadDto], {type: "application/json"}));
        formData.append('files', file)

      attachmentService.saveFile(formData).then((res) => {
        VXETable.modal.message({content: '上传成功', status: 'success'});
        let url=process.env.VUE_APP_API_BASE_URL+"/img"+res.data.attachmentAddr
        console.log(url)
        insertFn(url, res.data.attachmentRealNamea, url)
      }).catch((error) => {
        VXETable.modal.message({content: '上传失败' + `系统错误，原因是：${error.message}`, status: 'error'});
      });
    console.log(file, insertFn)
    // insertFn(url, alt, href)
  }
}
return {
  editorRef,
  valueHtml,
  mode: 'default',
  toolbarConfig,
  editorConfig,
  handleCreated, updateHtml
}
}
}
</script>

